<template>
  <div style="width: 100%;height: 100%;position: relative;">
    <div class="animate__animated animate__zoomIn map" id="mapEchart" :style="{ width: '100%', height: height + 'px' }">
    </div>
    <div class="map-wutai">
      <el-image :src="require('@/assets/background/wutai-removebg-preview.svg')"></el-image>
    </div>
  </div>
</template>

<script>
// import tdTheme from "@/api/ops/echart/theme.json"; // 引入默认主题
import "echarts-gl"
import * as geoJson from "@/utils/china3d.json";
import mapbg from '@/assets/background/mapbg.png'
// import loading from '@/assets/background/loading.gif'


export default {
  name: "chinaMap",
  data() {
    return {
      myChart: null,
      isOver: false,
      option: {
        tooltip: {
          show: false,
        },
        geo3D: {
          zlevel: 1,
          top: -20,
          roam: true,
          regionHeight: 2.5, //三维地图区域的高度,即模型的高度
          map: "china", // 重要！！！注册的地图名字叫啥，这里就填啥
          shading: "color", // 重要！！！选择texture渲染的方式 color realistic
          silent: true, //禁止鼠标移入某个区域后高亮显示
          colorMaterial: {
            detailTexture: mapbg, //重要！！！2D地图的DOM作为纹理贴图放到3D上
            textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
          },
          // // colorMaterial: {
          // //   detailTexture: this.myChart2, // 纹理贴图
          // //   textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
          // // },
          // realisticMaterial: {
          //   detailTexture: this.myChart2,
          // },
          itemStyle: {
            color: "#ccc",
            opacity: 1,
            borderWidth: 1,
            borderColor: "#5a97e7",
          },
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                }
              },
              label: {
                show: false // 隐藏文字
              }
            }
          ],
          viewControl: {
            rotateSensitivity: [1, 0], // 只能横向旋转
            zoomSensitivity: 0, // 禁止鼠标滚轮缩放
            autoRotate: true,
            autoRotateAfterStill: 1,
            // minDistance: 500,
            distance: 70,
            // maxDistance: 80,
            center: [1, 0, 0],
            minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
            maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
            minBeta: -15, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
            maxBeta: 10, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
            beta: 5,
            animation: true, // 是否开启动画。[ default: true ]
            autoRotateSpeed: 1,
            animationDurationUpdate: 30000, // 过渡动画的时长。[ default: 1000 ]
            animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
            autoRotateDirection: 'ccw',
          },
          // emphasis: {
          //   //高亮时样式
          //   label: {
          //     //移入时的高亮文本
          //     color: "#fff", //显示字体颜色变淡
          //     fontSize: 16, //显示字体变大
          //   },
          //   itemStyle: {
          //     color: "#fff", //显示移入的区块变色
          //   },
          // },
          light: {
            //光照阴影
            main: {
              // color: "#fff", //光照颜色
              intensity: 1, //光照强度
              //shadowQuality: 'high', //阴影亮度
              shadow: true, //是否显示阴影
              shadowQuality: "medium", //阴影质量 ultra //阴影亮度
              alpha: 55,
              beta: 10
            },
            ambient: {
              intensity: 0.7
            }
          }
        },
        // dataRange: {
        //   x: 'right',
        //   y: 'top',
        //   splitList: [
        //     { start: 0, end: 100 },
        //     { start: 100, end: 200 },
        //     { start: 200, end: 300 },
        //     { start: 300, end: 400 },
        //     { start: 400, end: 500 },
        //     { start: 500, end: 600 },
        //     { start: 600, end: 700 },
        //     { start: 700, end: 800 },
        //     { start: 800, end: 900 },
        //     { start: 900, end: 1000 },
        //   ],
        // },
        series: [
          {
            zlevel: 10,
            type: "bar3D",
            coordinateSystem: "geo3D",
            barSize: 1,
            tooltip: {
              show: true,
              formatter: (e) => {
                console.log(22222, e);
                return ` ${e.name}`;
              },
            },
            // // 随便写点模拟数据
            // data: [
            //   { name: "甘肃", value: [103.73, 36.03, -1] },
            //   { name: "青海", value: [101.74, 36.56, 0] },
            //   { name: "四川", value: [104.06, 30.67, 1] },
            //   { name: "河北", value: [114.48, 38.03, 2] },
            //   { name: "云南", value: [102.73, 25.04, 3] },
            //   { name: "贵州", value: [106.71, 26.57, 4] },
            //   { name: "湖北", value: [114.31, 30.52, 5] },
            // ],
          },
          {
            type: "scatter3D",
            coordinateSystem: 'geo3D',
            zlevel: 8,
            // symbol: 'circle',
            // symbol: 'image://http://192.168.1.4:82/static/img/loading.a7834ee7.gif',
            symbol: 'path://M978.24 544.149333A210.453333 210.453333 0 0 1 992 618.666667c0 167.338667-198.784 297.642667-446.186667 308.586666l31.488 31.445334a32 32 0 0 1 2.197334 42.837333l-2.197334 2.432a32 32 0 0 1-42.837333 2.197333l-2.432-2.197333-85.333333-85.333333a32 32 0 0 1-2.197334-42.837334l2.197334-2.432 85.333333-85.333333a32 32 0 0 1 47.466667 42.837333l-2.197334 2.432-29.802666 29.802667C762.496 852.224 928 743.317333 928 618.666667c0-17.6-3.242667-34.944-9.642667-51.946667a32 32 0 0 1 59.882667-22.570667z m-890.666667-19.648a32 32 0 0 1 18.410667 41.322667A146.666667 146.666667 0 0 0 96 618.666667c0 91.605333 90.496 178.261333 233.856 220.181333a32 32 0 0 1-17.962667 61.44C144.213333 851.2 32 743.829333 32 618.666667c0-25.813333 4.821333-51.242667 14.229333-75.733334a32 32 0 0 1 41.322667-18.432zM503.317333 14.293333a32 32 0 0 1 30.592 0.512l301.44 170.666667a32.106667 32.106667 0 0 1 7.04 5.376l0.725334 0.789333a27.178667 27.178667 0 0 1 2.666666 3.306667l0.384 0.554667 0.725334 1.130666 0.533333 0.917334 0.256 0.469333 0.810667 1.6-1.066667-2.069333a32.362667 32.362667 0 0 1 2.730667 6.314666l0.213333 0.704c0.213333 0.746667 0.384 1.493333 0.533333 2.218667l0.128 0.661333a27.797333 27.797333 0 0 1 0.533334 5.866667l-0.128-2.944c0.085333 0.832 0.128 1.664 0.149333 2.496V554.666667a32 32 0 0 1-16.256 27.84l-301.418667 170.666666a32 32 0 0 1-30.592 0.512l-326.186666-170.666666A32 32 0 0 1 160 554.666667V213.333333c0-11.904 6.613333-22.826667 17.173333-28.373333zM223.978667 263.232l0.021333 272.042667 262.165333 137.194666V403.178667l-262.186666-139.946667z m563.584 4.992l-237.397334 134.421333v267.776l237.418667-134.421333-0.021333-267.776zM517.568 79.082667L263.722667 211.904l253.994666 135.573333L754.624 213.333333 517.568 79.082667z',
            symbolSize: function (arg) {
              const height = arg[0] / 100;
              const weight = arg[1];
              const bmi = weight / (height * height);
              // console.log(222222222, bmi, height, weight);
              if (bmi > 28) {
                return 25;
              }
              // if (bmi > 30) {
              //   return 18
              // } else if (bmi < 10) {
              //   return 10;
              // }
              return 40;
            },
            // animation: true,
            // // blendMode: 'lighter', // lighter source-over
            // animationEasing: 'cubicInOut',
            // animationEasingUpdate: true,
            // animationDurationUpdate: 1000,
            itemStyle: {
              color: '#82f2fd',
              borderColor: '#82f2fd',
              opacity: 0.75,
              borderWidth: 0
            },
            label: {
              normal: {
                show: true,
                position: 'top',
                distance: 0,
                formatter: function (data) {
                  // console.log(data)
                  var res = data.name + '\n-------------\n' + '设备数量：' + data.value[0];
                  return res
                },
                textStyle: {
                  backgroundColor: '#160a0a38',
                  borderRadius: 5,
                  padding: 10,
                  fontSize: 12,
                  color: '#fff',
                  fontWeight: '600',
                },
              }
            },
            data: [
              { name: "甘肃省", value: [101.82, 36.05, -1] },
              { name: "河北省", value: [114.48, 38.03, 2] },
              { name: "云南省", value: [101.48, 25.00, 3] },
              { name: "湖北省", value: [112.31, 30.52, 5] },
            ],
          },
          // {
          //   type: 'lines3D',
          //   coordinateSystem: 'geo3D',
          //   zlevel: 9,
          //   effect: {
          //     show: true,
          //     constantSpeed: 2,
          //     trailWidth: 3,
          //     trailLength: 1,
          //     trailOpacity: 1,
          //     spotIntensity: 10
          //   },
          //   blendMode: 'lighter',
          //   polyline: true,
          //   lineStyle: {
          //     width: 4,
          //     color: '#ff270a',
          //     opacity: 0.1
          //   },
          //   data: [
          //     {
          //       'coords': [
          //         [
          //           87.38577616056334,
          //           33.07427208000001
          //         ],
          //         [
          //           87.38385106572923,
          //           33.1204548042636
          //         ],
          //         [
          //           87.37808516009547,
          //           33.166388435113234
          //         ],
          //         [
          //           87.36850653457466,
          //           33.21184969969346
          //         ],
          //         [
          //           87.35516185526754,
          //           33.256617968220674
          //         ],
          //         [
          //           87.33811613611027,
          //           33.300476312617825
          //         ],
          //         [
          //           87.31745242213317,
          //           33.34321254072439
          //         ],
          //         [
          //           87.29327138487363,
          //           33.38462020147166
          //         ],
          //         [
          //           87.2656908319145,
          //           33.42449955667332
          //         ],
          //         [
          //           87.23484513293741,
          //           33.46265851535315
          //         ],
          //         [
          //           87.20088456508716,
          //           33.498913526810334
          //         ],
          //         [
          //           87.16397458083665,
          //           33.53309042890508
          //         ],
          //         [
          //           87.12429500191891,
          //           33.56502524833147
          //         ],
          //         [
          //           87.08203914325395,
          //           33.59456494992504
          //         ],
          //         [
          //           87.03741287113753,
          //           33.6215681323305
          //         ],
          //         [
          //           86.99063360028167,
          //           33.64590566762479
          //         ],
          //         [
          //           86.9419292345917,
          //           33.667461282753855
          //         ],
          //         [
          //           86.89153705684151,
          //           33.6861320808945
          //         ],
          //         [
          //           86.83970257265572,
          //           33.7018290010964
          //         ],
          //         [
          //           86.78667831443089,
          //           33.714477214792474
          //         ],
          //         [
          //           86.73272261102312,
          //           33.724016457989826
          //         ],
          //         [
          //           86.67809832919578,
          //           33.73040129816675
          //         ],
          //         [
          //           86.62307159295914,
          //           33.73360133510789
          //         ],
          //         [
          //           86.56791048704086,
          //           33.73360133510789
          //         ],
          //         [
          //           86.5128837508042,
          //           33.73040129816675
          //         ],
          //         [
          //           86.45825946897686,
          //           33.724016457989826
          //         ],
          //         [
          //           86.4043037655691,
          //           33.714477214792474
          //         ],
          //         [
          //           86.35127950734424,
          //           33.7018290010964
          //         ],
          //         [
          //           86.29944502315847,
          //           33.6861320808945
          //         ],
          //         [
          //           86.24905284540829,
          //           33.667461282753855
          //         ],



          //       ], 'lineStyle': { width: 4 }
          //     },
          //     {
          //       'coords': [
          //         [
          //           86.20034847971831,
          //           33.64590566762479
          //         ],
          //         [
          //           86.15356920886245,
          //           33.6215681323305
          //         ],
          //         [
          //           86.10894293674603,
          //           33.59456494992504
          //         ],
          //         [
          //           86.06668707808106,
          //           33.56502524833147
          //         ],
          //         [
          //           86.02700749916335,
          //           33.53309042890508
          //         ],
          //         [
          //           85.99009751491283,
          //           33.498913526810334
          //         ],
          //         [
          //           85.95613694706259,
          //           33.46265851535315
          //         ],
          //         [
          //           85.92529124808549,
          //           33.42449955667332
          //         ],
          //         [
          //           85.89771069512635,
          //           33.38462020147166
          //         ],
          //         [
          //           85.87352965786681,
          //           33.34321254072439
          //         ],
          //         [
          //           85.8528659438897,
          //           33.300476312617825
          //         ],
          //         [
          //           85.83582022473243,
          //           33.256617968220674
          //         ],
          //         [
          //           85.82247554542533,
          //           33.21184969969346
          //         ],
          //         [
          //           85.8128969199045,
          //           33.166388435113234
          //         ],
          //         [
          //           85.80713101427074,
          //           33.1204548042636
          //         ],
          //         [
          //           85.80520591943664,
          //           33.07427208000001
          //         ],
          //         [
          //           85.80713101427074,
          //           33.02806510004661
          //         ],
          //         [
          //           85.8128969199045,
          //           32.98205917430836
          //         ],
          //         [
          //           85.82247554542533,
          //           32.936478982986955
          //         ],
          //         [
          //           85.83582022473243,
          //           32.891547470969144
          //         ],
          //         [
          //           85.8528659438897,
          //           32.84748474410577
          //         ],
          //         [
          //           85.87352965786681,
          //           32.80450697311702
          //         ],
          //         [
          //           85.89771069512635,
          //           32.76282531094128
          //         ],
          //         [
          //           85.92529124808549,
          //           32.722644829388315
          //         ],
          //         [
          //           85.95613694706259,
          //           32.68416348096006
          //         ],
          //         [
          //           85.99009751491283,
          //           32.647571091663096
          //         ],
          //         [
          //           86.02700749916335,
          //           32.613048390553715
          //         ],
          //         [
          //           86.06668707808105,
          //           32.580766081628845
          //         ],
          //         [
          //           86.10894293674603,
          //           32.550883963505
          //         ],
          //         [
          //           86.15356920886245,
          //           32.52355010211044
          //         ],
          //       ],
          //       'lineStyle': {}
          //     },
          //     {
          //       'coords': [
          //         [
          //           86.20034847971831,
          //           32.49890006135734
          //         ],
          //         [
          //           86.24905284540829,
          //           32.47705619645919
          //         ],
          //         [
          //           86.29944502315847,
          //           32.45812701421786
          //         ],
          //         [
          //           86.35127950734424,
          //           32.44220660422659
          //         ],
          //         [
          //           86.4043037655691,
          //           32.429374144522264
          //         ],
          //         [
          //           86.45825946897686,
          //           32.419693484776154
          //         ],
          //         [
          //           86.5128837508042,
          //           32.41321280964136
          //         ],
          //         [
          //           86.56791048704086,
          //           32.40996438438011
          //         ],
          //         [
          //           86.62307159295914,
          //           32.40996438438011
          //         ],
          //         [
          //           86.67809832919578,
          //           32.41321280964136
          //         ],
          //         [
          //           86.73272261102312,
          //           32.419693484776154
          //         ],
          //         [
          //           86.78667831443089,
          //           32.429374144522264
          //         ],
          //         [
          //           86.83970257265572,
          //           32.44220660422659
          //         ],
          //         [
          //           86.89153705684151,
          //           32.45812701421786
          //         ],
          //         [
          //           86.94192923459168,
          //           32.47705619645919
          //         ],
          //         [
          //           86.99063360028167,
          //           32.49890006135734
          //         ],
          //         [
          //           87.03741287113753,
          //           32.52355010211044
          //         ],
          //         [
          //           87.08203914325395,
          //           32.550883963505
          //         ],
          //         [
          //           87.12429500191894,
          //           32.580766081628845
          //         ],
          //         [
          //           87.16397458083665,
          //           32.613048390553715
          //         ],
          //         [
          //           87.20088456508716,
          //           32.647571091663096
          //         ],
          //         [
          //           87.23484513293741,
          //           32.68416348096006
          //         ],
          //         [
          //           87.2656908319145,
          //           32.722644829388315
          //         ],
          //         [
          //           87.29327138487363,
          //           32.76282531094128
          //         ],
          //         [
          //           87.31745242213317,
          //           32.80450697311702
          //         ],
          //         [
          //           87.33811613611027,
          //           32.84748474410577
          //         ],
          //         [
          //           87.35516185526754,
          //           32.891547470969144
          //         ],
          //         [
          //           87.36850653457466,
          //           32.936478982986955
          //         ],
          //         [
          //           87.37808516009547,
          //           32.98205917430836
          //         ],
          //         [
          //           87.38385106572923,
          //           33.02806510004661
          //         ],
          //       ], 'lineStyle': {}
          //     }
          //   ],
          // }
        ],
      }
    }
  },
  methods: {
    // 以下3d
    chartMap() {
      document.getElementById("mapEchart").removeAttribute('_echarts_instance_');
      this.myChart = this.$echarts.init(
        document.getElementById("mapEchart")
      );
      const region = this.$store.state.settings.region
      const geo = JSON.parse(JSON.stringify(geoJson))
      let dataShow = [
        { name: "甘肃省", value: [101.82, 36.05, -1] },
        { name: "河北省", value: [114.48, 38.03, 2] },
        { name: "云南省", value: [101.48, 25.00, 3] },
        { name: "湖北省", value: [112.31, 30.52, 5] },
      ]
      console.log(1111111, region, region.value);
      if (region.children) {
        geo.default.features = geoJson.default.features.filter(item => region.children.includes(item.properties.name))
        geo.features = geoJson.features.filter(item => region.children.includes(item.properties.name))
        // console.log(5555555, this.$store.state.settings.region, geoJson);
        dataShow = dataShow.filter(item => region.children.includes(item.name))
      }
      this.option.series[1].data = dataShow
      this.option.geo3D.top = region.top || -20
      this.option.geo3D.viewControl.distance = region.distance || 70
      this.option.geo3D.viewControl.minBeta = region.minBeta || -15
      this.option.geo3D.viewControl.maxBeta = region.maxBeta || 10
      this.option.geo3D.viewControl.beta = region.beta || 5
      this.$echarts.registerMap("china", geo);
      this.myChart.on('rendered', (e) => {
        // console.log(777, '渲染》》》》》》    ', this.myChart)
        if (!this.myChart) return
        const option = this.myChart._model.option
        const viewControl = option.geo3D[0].viewControl
        if (viewControl.beta == viewControl.minBeta) {
          this.isOver = true
        } else if (viewControl.beta == viewControl.maxBeta) {
          this.isOver = false
        }
      });
      this.myChart.setOption(this.option, true);
    },
    tranMap() {
      if (this.isOver) {
        this.option.geo3D.viewControl.beta = -15
        this.option.geo3D.viewControl.autoRotateDirection = 'cw'
        console.log('旋转', this.option.series,);
        setTimeout(() => {
          this.myChart.setOption(this.option, true);
        }, 1000)

      } else {
        this.option.geo3D.viewControl.beta = 10
        this.option.geo3D.viewControl.autoRotateDirection = 'ccw'
        setTimeout(() => {
          this.myChart.setOption(this.option, true);
        }, 1000)
      }
    }
  },
  props: {
    height: {
      type: Number,
      default: 500
    },
    width: {
      type: Number,
      default: 500
    },
  },
  mounted() {
    // this.init()
    this.$nextTick(() => this.chartMap())
  },
  watch: {
    height: {
      handler: function (newVal, oldVal) {
        this.$nextTick(() => this.chartMap())
      }
    },
    isOver(val, oldVal) {
      this.tranMap()
    },
    '$store.state.settings.region': {
      handler(val, oldVal) {
        // console.log('$store.state.settings.region>>>>>>    ', val, oldVal);
        this.$nextTick(() => this.chartMap())
      },
      deep: true
    }
  },
  beforeDestroy() {
    // 防止内存泄露
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
};
</script>

<style  lang="scss" scoped>
.map {
  /* height: 7rem; */
  height: 100% !important;
  width: 100%;
}

.map-wutai {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  left: 0;
  top: 0;
  z-index: -1;

  .el-image {
    height: 59.04%;
  }
}

.icon-path {
  animation: icon-path-animation 8s ease-in infinite;
}

@keyframes icon-path-animation {
  0% {
    stroke-dasharray: 4917;
    stroke-dashoffset: 4917;
  }

  40% {
    stroke-dasharray: 4917;
    stroke-dashoffset: 0;
    fill: #fff;
  }

  60% {
    stroke-dasharray: 4917;
    stroke-dashoffset: 0;
    fill: #1875F0;
  }

  100% {
    stroke-dasharray: 4917;
    stroke-dashoffset: 0;
    fill: #1875F0;
  }
}
</style>
